<template>
  <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="form.userName" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="crud.cancelCU">取消</el-button>
      <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import CRUD, { form } from '@crud/crud'
const defaultForm = { id: null, userName: null }
export default {
  mixins: [form(defaultForm)],
  data() {
    return {
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    [CRUD.HOOK.beforeToAdd](crud, form) {
      console.log('新建之前')
    },
    [CRUD.HOOK.afterToAdd](crud, form) {
      crud.notify('新建之后', CRUD.NOTIFICATION_TYPE.SUCCESS)
    },
    [CRUD.HOOK.beforeToEdit](crud, form) {
      console.log('编辑之前')
    },
    [CRUD.HOOK.afterToEdit](crud, form) {
      crud.notify('编辑之后', CRUD.NOTIFICATION_TYPE.SUCCESS)
    },
    [CRUD.HOOK.beforeDelete](crud, form) {
      console.log('删除之前')
    },
    [CRUD.HOOK.afterDelete](crud, form) {
      crud.notify('删除之后', CRUD.NOTIFICATION_TYPE.SUCCESS)
    }
  }
}
</script>
